<template>
    <div>
        <el-row :gutter="10">
            <el-col v-for="(item, index) in images" :xs="24" :sm="16" :md="12" :lg="8" :xl="6" :key="index" style="margin-bottom: 15px">
                <el-card :bordered="true" size="small" shadow="hover">
                    <div slot="header">
                        <span>{{ item.title}}</span>
                    </div>
                    <el-image
                        @click="isShowPictures = true"
                        :src="item.value"
                        fit="fill"
                    >
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </el-card>
            </el-col>
        </el-row>
        <el-image-viewer v-if="isShowPictures" :on-close="() => { this.isShowPictures = false }" :url-list="pictures"></el-image-viewer>
    </div>
</template>

<script>
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    import configs from '@/config'

    export default {
        name: 'CustomerMaterial',
        props: ['images'],
        components: {
            ElImageViewer
        },
        data () {
            return {
                configs,
                isShowPictures: false
            }
        },
        computed: {
            pictures () {
                return this.userDetail.photo.map(item => {
                    return this.configs.staticUrl + item.value
                })
            }
        }
    }
</script>

<style lang="less" scoped>
/deep/ .el-card__header {
    padding: 6px 8px;
}
</style>
